<template>
    <div class="list">
        
            <router-link :to="{name:'detail',  params: item }" class="item" v-for="(item,index) in list" :key="index">
                <div class="pic">
                    <img :src="item.pic" alt="">
                </div>
                <div class="text">
                    <div class="name">{{item.name}}</div>
                    <div class="buycount">已售：{{item.buyCount}}</div>
                    <div class="price">单价：<span>￥{{item.price}}</span></div>
                    <button class="but" @click.prevent.stop="addCart(item)">加入购物车</button>
                </div>
            </router-link>
        
    </div>
</template>

<script>
import {mapMutations} from "vuex"
import Axios from 'axios'
import bus from '../../bus'
export default {
    data(){
        return {
            list:[]
        }
    },
    methods:{
        ...mapMutations(["addCart"])
    },


    mounted(){
        Axios.get('http://yantianfeng.com/api/goodList').then((res)=>{
            this.list = res.data.goodList;
        });

        /* 在需要接收数据的组件中,监听事件 */
        bus.$on('receiveIndex',(index)=>{
            //排序
            switch(index)
            {
                case 0://价格升序
                    this.list.sort(( a,b) => { return a.price - b.price  } );
                return
                case 1://价格降序
                    this.list.sort(( a,b) => { return b.price - a.price  } );
                return
                case 2://销量升序
                    this.list.sort(( a,b) => { return a.buyCount - b.buyCount  } );
                return
                case 3://销量降序
                    this.list.sort(( a,b) => { return b.buyCount - a.buyCount  } );
                return
                default://默认价格升序
                    this.list.sort(( a,b) => { return a.price - b.price  } );
            }
        })
    }
}
</script>
<style>

.list{
    margin: 0 20px;
    border-top: 1px solid #f5f5f5;
}
.list .item{
    display: flex;
    margin-top: 20px;
    text-decoration: none;
}
.list .item .pic{
    width: 25%;
    margin-right: 20px;
}
.list .item .pic img{
    width: 100%;
}
.list .item .text{
    width: 75%;
    position: relative;
    text-decoration: none;
}
.list .item .text .name{
    color: #333;
    white-space: nowrap;/* 文本不换行 */
    text-overflow: ellipsis;/* 文本溢出 显示省略号 */
    overflow: hidden;/* 溢出盒子,隐藏 */
}
.list .item .text .but{
    position: absolute;
    right: 10px;
    bottom: 10px;
    color:#fff;
    background: crimson;
    border:0;
    outline: none;
    padding: 3px 5px;
}
.list .item .text .price span{
    color:orangered;
    font-weight: 700;
}
</style>